<template>
  <cs-container :is-back-to-top="true">
    <el-tabs
      class="content"
      tab-position="left"
      v-model="activeName"
      @tab-click="handelTab">
      <el-tab-pane class="tab" name="one">
        <span slot="label">全部 ({{allTotalNum}})</span>
        <all
          v-if="this.activeName === 'one'"
          :allTotalNum="allTotalNum"
          :allCurrentTableData="allCurrentTableData"
          :leftLineData="leftLineData"
          :middlePieData="middlePieData"
          :rightBarData="rightBarData"
          @filter="Filter"
          @upDate="upDate"></all>
      </el-tab-pane>

      <el-tab-pane class="tab" name="two">
        <span slot="label">未确认 ({{unconfirmedTotalNum}})</span>
        <undefined
          v-if="this.activeName === 'two'"
          :unconfirmedCurrentTableData="unconfirmedCurrentTableData"
          :unconfirmedTotalNum="unconfirmedTotalNum"
          :unconfirmedleftLineData="unconfirmedleftLineData"
          :unconfirmedmiddlePieData="unconfirmedmiddlePieData"
          :unconfirmedrightBarData="unconfirmedrightBarData"
          @unconfirmedFilter="Filter"
          @upDate="upDate"></undefined>
      </el-tab-pane>

      <el-tab-pane class="tab" name="three">
        <span slot="label">待处理 ({{pendingTotalNum}})</span>
        <unprocessed
          v-if="this.activeName === 'three'"
          :unprocessedCurrentTableData="unprocessedCurrentTableData"
          :pendingTotalNum="pendingTotalNum"
          :unprocessedleftLineData="unprocessedleftLineData"
          :unprocessedmiddlePieData="unprocessedmiddlePieData"
          :unprocessedrightBarData="unprocessedrightBarData"
          @unprocessedFilter="Filter"
          @upDate="upDate"></unprocessed>
      </el-tab-pane>

      <el-tab-pane class="tab" name="four">
        <span slot="label">处理中 ({{processingTotalNum}})</span>
        <processing
          v-if="this.activeName === 'four'"
          :processingCurrentTableData="processingCurrentTableData"
          :processingTotalNum="processingTotalNum"
          :processingleftLineData="processingleftLineData"
          :processingmiddlePieData="processingmiddlePieData"
          :processingrightBarData="processingrightBarData"
          @processingFilter="Filter"
          @upDate="upDate"></processing>
      </el-tab-pane>

      <el-tab-pane class="tab" name="five">
        <span slot="label">已关闭 ({{closedTotalNum}})</span>
        <closed
          v-if="this.activeName === 'five'"
          :closedCurrentTableData="closedCurrentTableData"
          :closedTotalNum="closedTotalNum"
          :closedleftLineData="closedleftLineData"
          :closedmiddlePieData="closedmiddlePieData"
          :closedrightBarData="closedrightBarData"
          @closedFilter="Filter"
          @upDate="upDate"></closed>
      </el-tab-pane>

      <el-tab-pane class="tab" name="six">
        <span slot="label">告警合并&nbsp;&nbsp;</span>
        <alarmmerge
          v-if="this.activeName === 'six'"
          :alarmMergeData="alarmMergeData"
          :mergerConditions="mergerConditions"
          @updataTable="getMerge"></alarmmerge>
      </el-tab-pane>

    </el-tabs>
  </cs-container>
</template>

<script>
import { all, allLineData, allPieData, allBarData } from '@/api/alarm/all.js'
import { alarmMerge } from '@/api/alarm/alarmmerge.js'
// 组件
import All from './components/all/index.vue'
import Undefined from './components/unconfirmed/index.vue'
import Alarmmerge from './components/alarmmerge/index.vue'
import Unprocessed from './components/unprocessed/index.vue'
import Processing from './components/processing/index.vue'
import Closed from './components/closed/index.vue'
export default {
  data() {
    return {
      allTotalNum: 0, // 全部
      unconfirmedTotalNum: 0, // 未确认
      pendingTotalNum: 0, // 待处理
      processingTotalNum: 0, // 处理中
      closedTotalNum: 0, // 已关闭
      activeName: 'one',
      pageNo: 1,
      pageSize: 20,
      // 全部页面的数据
      allCurrentTableData: [],
      leftLineData: [],
      middlePieData: [],
      rightBarData: [],
      // 未确认页面的数据
      unconfirmedCurrentTableData: [],
      unconfirmedleftLineData: [],
      unconfirmedmiddlePieData: [],
      unconfirmedrightBarData: [],
      // 待处理页面的数据
      unprocessedCurrentTableData: [],
      unprocessedleftLineData: [],
      unprocessedmiddlePieData: [],
      unprocessedrightBarData: [],
      // 处理中页面的数据
      processingCurrentTableData: [],
      processingleftLineData: [],
      processingmiddlePieData: [],
      processingrightBarData: [],
      // 已关闭页面的数据
      closedCurrentTableData: [],
      closedleftLineData: [],
      closedmiddlePieData: [],
      closedrightBarData: [],
      // 告警合并数据
      alarmMergeData: [],
      mergerConditions: []
    }
  },
  components: {
    All,
    Undefined,
    Alarmmerge,
    Unprocessed,
    Processing,
    Closed
  },
  created() {
    if (this.activeName === 'one') {
      this.getAllTableData()
      all({ status: '未确认', pageNo: this.pageNo, pageSize: this.pageSize }).then((res) => {
        this.unconfirmedTotalNum = res.data.totalRows
      })
      all({ status: '待处理', pageNo: this.pageNo, pageSize: this.pageSize }).then((res) => {
        this.pendingTotalNum = res.data.totalRows
      })
      all({ status: '处理中', pageNo: this.pageNo, pageSize: this.pageSize }).then((res) => {
        this.processingTotalNum = res.data.totalRows
      })
      all({ status: '已关闭', pageNo: this.pageNo, pageSize: this.pageSize }).then((res) => {
        this.closedTotalNum = res.data.totalRows
      })
    }
  },
  mounted() {
    if (this.activeName === 'one') {
      // this.getAllTableData()
      this.getLeftLineData()
      this.getMiddlePieData()
      this.getRightBarData()
    }
  },
  methods: {
    handelTab(tab) {
      if (tab.name === 'one') { // 全部
        this.activeName = tab.name
        this.getAllTableData()
        this.getLeftLineData()
        this.getMiddlePieData()
        this.getRightBarData()
      } else if (tab.name === 'two') { // 未确认
        this.activeName = tab.name
        this.getAllTableData()
        this.getLeftLineData()
        this.getMiddlePieData()
        this.getRightBarData()
      } else if (tab.name === 'three') { // 待处理
        this.activeName = tab.name
        this.getAllTableData()
        this.getLeftLineData()
        this.getMiddlePieData()
        this.getRightBarData()
      } else if (tab.name === 'four') { // 处理中
        this.activeName = tab.name
        this.getAllTableData()
        this.getLeftLineData()
        this.getMiddlePieData()
        this.getRightBarData()
      } else if (tab.name === 'five') { // 已关闭
        this.activeName = tab.name
        this.getAllTableData()
        this.getLeftLineData()
        this.getMiddlePieData()
        this.getRightBarData()
      } else if (tab.name === 'six') { // 告警合并
        this.activeName = tab.name
        this.getMerge()
      }
    },
    // 获取全部页面上的表格数据
    getAllTableData() {
      let _statue = ''
      if (this.activeName === 'one') {
        _statue = ''
      } else if (this.activeName === 'two') {
        _statue = '未确认'
      } else if (this.activeName === 'three') {
        _statue = '待处理'
      } else if (this.activeName === 'four') {
        _statue = '处理中'
      } else if (this.activeName === 'five') {
        _statue = '已关闭'
      }
      const allData = {
        status: _statue,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      all(allData).then((res) => {
        if (res.code === 200) {
          if (this.activeName === 'one') { // 全部
            this.allCurrentTableData = res.data.rows
            this.allTotalNum = res.data.totalRows
          } else if (this.activeName === 'two') { // 未确认
            this.unconfirmedCurrentTableData = res.data.rows
            this.unconfirmedTotalNum = res.data.totalRows
          } else if (this.activeName === 'three') { // 待处理
            this.unprocessedCurrentTableData = res.data.rows
            this.pendingTotalNum = res.data.totalRows
          } else if (this.activeName === 'four') { // 处理中
            this.processingCurrentTableData = res.data.rows
            this.processingTotalNum = res.data.totalRows
          } else if (this.activeName === 'five') { // 已关闭
            this.closedCurrentTableData = res.data.rows
            this.closedTotalNum = res.data.totalRows
          }
        }
      })
    },
    // 获取全部页面上的左边折线数据
    getLeftLineData() {
      let _statueLine = ''
      if (this.activeName === 'one') {
        _statueLine = ''
      } else if (this.activeName === 'two') {
        _statueLine = '未确认'
      } else if (this.activeName === 'three') {
        _statueLine = '待处理'
      } else if (this.activeName === 'four') {
        _statueLine = '处理中'
      } else if (this.activeName === 'five') {
        _statueLine = '已关闭'
      }
      const data = {
        status: _statueLine
      }
      allLineData(data).then((res) => {
        if (res.code === 200) {
          if (this.activeName === 'one') { // 全部
            this.leftLineData = res.data
          } else if (this.activeName === 'two') { // 未确认
            this.unconfirmedleftLineData = res.data
          } else if (this.activeName === 'three') { // 待处理
            this.unprocessedleftLineData = res.data
          } else if (this.activeName === 'four') { // 处理中
            this.processingleftLineData = res.data
          } else if (this.activeName === 'five') { // 已关闭
            this.closedleftLineData = res.data
          }
        }
      })
    },
    // 获取全部页面上的中间饼状图数据
    getMiddlePieData() {
      let _statuePie = ''
      if (this.activeName === 'one') {
        _statuePie = ''
      } else if (this.activeName === 'two') {
        _statuePie = '未确认'
      } else if (this.activeName === 'three') {
        _statuePie = '待处理'
      } else if (this.activeName === 'four') {
        _statuePie = '处理中'
      } else if (this.activeName === 'five') {
        _statuePie = '已关闭'
      }
      const data = {
        status: _statuePie
      }
      allPieData(data).then((res) => {
        if (res.code === 200) {
          if (this.activeName === 'one') { // 全部
            this.middlePieData = res.data
          } else if (this.activeName === 'two') { // 未确认
            this.unconfirmedmiddlePieData = res.data
          } else if (this.activeName === 'three') { // 待处理
            this.unprocessedmiddlePieData = res.data
          } else if (this.activeName === 'four') { // 处理中
            this.processingmiddlePieData = res.data
          } else if (this.activeName === 'five') { // 已关闭
            this.closedmiddlePieData = res.data
          }
        }
      })
    },
    // 获取全部页面上的右边柱状图数据
    getRightBarData() {
      let _statueBar = ''
      if (this.activeName === 'one') {
        _statueBar = ''
      } else if (this.activeName === 'two') {
        _statueBar = '未确认'
      } else if (this.activeName === 'three') {
        _statueBar = '待处理'
      } else if (this.activeName === 'four') {
        _statueBar = '处理中'
      } else if (this.activeName === 'five') {
        _statueBar = '已关闭'
      }
      const data = {
        status: _statueBar
      }
      allBarData(data).then((res) => {
        if (res.code === 200) {
          if (this.activeName === 'one') { // 全部
            this.rightBarData = res.data
          } else if (this.activeName === 'two') { // 未确认
            this.unconfirmedrightBarData = res.data
          } else if (this.activeName === 'three') { // 待处理
            this.unprocessedrightBarData = res.data
          } else if (this.activeName === 'four') { // 处理中
            this.processingrightBarData = res.data
          } else if (this.activeName === 'five') { // 已关闭
            this.closedrightBarData = res.data
          }
        }
      })
    },
    // 全部页面过滤条件
    Filter(data, type) {
      const dataLine = {
        status: data.status,
        time: data.time,
        source: data.source,
        severity: data.severity,
        content: data.content
      }
      allLineData(dataLine).then((res) => {
        if (type === 'all') {
          this.leftLineData = res.data
        } else if (type === 'unconfirmed') {
          this.unconfirmedleftLineData = res.data
        } else if (type === 'unprocessed') {
          this.unprocessedleftLineData = res.data
        } else if (type === 'processing') {
          this.processingleftLineData = res.data
        } else if (type === 'closed') {
          this.closedleftLineData = res.data
        }
      })
      allPieData(dataLine).then((res) => {
        if (type === 'all') {
          this.middlePieData = res.data
        } else if (type === 'unconfirmed') {
          this.unconfirmedmiddlePieData = res.data
        } else if (type === 'unprocessed') {
          this.unprocessedmiddlePieData = res.data
        } else if (type === 'processing') {
          this.processingmiddlePieData = res.data
        } else if (type === 'closed') {
          this.closedmiddlePieData = res.data
        }
      })
      allBarData(dataLine).then((res) => {
        if (type === 'all') {
          this.rightBarData = res.data
        } else if (type === 'unconfirmed') {
          this.unconfirmedrightBarData = res.data
        } else if (type === 'unprocessed') {
          this.unprocessedrightBarData = res.data
        } else if (type === 'processing') {
          this.processingrightBarData = res.data
        } else if (type === 'closed') {
          this.closedrightBarData = res.data
        }
      })
      all(data).then((res) => {
        if (type === 'all') {
          this.allCurrentTableData = res.data.rows
          this.allTotalNum = res.data.totalRows
        } else if (type === 'unconfirmed') {
          this.unconfirmedCurrentTableData = res.data.rows
          this.unconfirmedTotalNum = res.data.totalRows
        } else if (type === 'unprocessed') {
          this.unprocessedCurrentTableData = res.data.rows
          this.pendingTotalNum = res.data.totalRows
        } else if (type === 'processing') {
          this.processingCurrentTableData = res.data.rows
          this.processingTotalNum = res.data.totalRows
        } else if (type === 'closed') {
          this.closedCurrentTableData = res.data.rows
          this.closedTotalNum = res.data.totalRows
        }
      })
    },
    // 实时更新左边的数字
    upDate(command) {
      if (command === '未确认') {
        all({ status: '未确认', pageNo: this.pageNo, pageSize: this.pageSize }).then((res) => {
          this.unconfirmedTotalNum = res.data.totalRows
        })
      } else if (command === '待处理') {
        all({ status: '待处理', pageNo: this.pageNo, pageSize: this.pageSize }).then((res) => {
          this.pendingTotalNum = res.data.totalRows
        })
      } else if (command === '处理中') {
        all({ status: '处理中', pageNo: this.pageNo, pageSize: this.pageSize }).then((res) => {
          this.processingTotalNum = res.data.totalRows
        })
      } else if (command === '已关闭') {
        all({ status: '已关闭', pageNo: this.pageNo, pageSize: this.pageSize }).then((res) => {
          this.closedTotalNum = res.data.totalRows
        })
      }
    },
    // 获取合并页面的表格数据
    getMerge() {
      alarmMerge().then((res) => {
        this.alarmMergeData = res.data
        this.mergerConditions = res.data[0].conditions.split(',')
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  padding: 20px;
  height: 95%;
  overflow-y:auto;
}
/deep/ :focus{outline:0;}
</style>
